<template>
  <div class="i-table-no-border">
    <div>
      <table-btns
        :tableTopOperateData="listData.tableTopOperate"
        :tableTopBatchOperate="listData.tableTopBatchOperate"
        :selectedData="selectedData"
        :requestApi="listData.requestApi"
        :basePath="basePath"
        @exportData="exportData"
        @actionsChange="getData"
      >
      </table-btns>
    </div>
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      class="ivu-mt"
      stripe
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <!-- 图文并列 start -->
      <template slot-scope="{ row }" slot="imgTxt">
        <Row
          :gutter="16"
          class="ivu-pt-8 ivu-pb-8"
          type="flex"
          justify="start"
          align="middle"
        >
          <Col
            v-if="row.imgTxt.onlyShow !== 'text'"
            :span="row.imgTxt.onlyShow === 'image' ? 24 : 8"
          >
            <Avatar
              :src="row.imgTxt.image"
              icon="ios-images"
              :shape="row.imgTxt.shape"
              :size="row.imgTxt.size"
            />
          </Col>
          <Col
            v-if="row.imgTxt.onlyShow !== 'image'"
            :span="row.imgTxt.onlyShow === 'text' ? 24 : 16"
          >
            <a v-if="!!row.imgTxt.nameLink" :href="row.imgTxt.nameLink">{{
              row.imgTxt.name
            }}</a>
            <span v-else>{{ row.imgTxt.name }}</span>
          </Col>
        </Row>
      </template>
      <template slot-scope="{ row }" slot="imgTxt1">
        <!-- 备用插槽 -->
        <Row
          :gutter="16"
          class="ivu-pt-8 ivu-pb-8"
          type="flex"
          justify="start"
          align="middle"
        >
          <Col
            v-if="row.imgTxt1.onlyShow !== 'text'"
            :span="row.imgTxt1.onlyShow === 'image' ? 24 : 8"
          >
            <Avatar
              :src="row.imgTxt1.image"
              icon="ios-images"
              :shape="row.imgTxt1.shape"
              :size="row.imgTxt1.size"
            />
          </Col>
          <Col
            v-if="row.imgTxt1.onlyShow !== 'image'"
            :span="row.imgTxt1.onlyShow === 'text' ? 24 : 16"
          >
            <a v-if="!!row.imgTxt1.nameLink" :href="row.imgTxt1.nameLink">{{
              row.imgTxt1.name
            }}</a>
            <span v-else>{{ row.imgTxt1.name }}</span>
          </Col>
        </Row>
      </template>
      <!-- 图文并列 end -->
      <template slot-scope="{ row }" slot="productStatus">
        <Badge v-if="row.productStatus == 0" status="default" text="上架" />
        <Badge v-if="row.productStatus == 1" status="processing" text="下架" />
      </template>
      <template slot-scope="{ row }" slot="auditStatus">
        <Tag v-if="row.auditStatus == 0" color="success">通过</Tag>
        <Tag v-if="row.auditStatus == 1" color="error">未通过</Tag>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <table-actions
          :requestApi="listData.requestApi"
          :basePath="basePath"
          :rowData="row"
          :indexData="index"
          @actionsChange="getData"
        ></table-actions>
      </template>
    </Table>
    <!-- 表格内容 end  -->
    <!-- 分页 start  -->
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="totalNum"
        transfer
        show-total
        show-sizer
        :current.sync="nowPage"
        @on-change="getData"
        @on-page-size-change="handleChangePage"
      />
    </div>
    <!-- 分页 end  -->
  </div>
</template>
<script>

    import { mapState, mapMutations } from 'vuex';
    import util from '@/libs/util';
    import { ApiRequest } from '@api/basePage';
    import tables from '@/mixins/dynamictable'; // 混入通用代码

    import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
    import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
    import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
    import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件

    const winPathName = window.location.pathname;
    function async (pathname) {
        const c = {};
        c.tableActions = () => import('@/components/common/baseTable/tableActions'); // 表格操作项
        c.tableBtns = () => import('@/components/common/baseTable/tableBtns'); // 表格内部操作按钮
        const vueFileArr = require.context('@/components/common/baseTable/custom', true, /\.vue/);
        const pathnameArr = pathname.split('/');
        const customActions = pathnameArr[pathnameArr.length - 1] + 'TableActions.vue';
        const customBtns = pathnameArr[pathnameArr.length - 1] + 'TableBtns.vue';
        vueFileArr.keys().forEach(options => {
            if (customActions === options.split('/')[1]) {
                c.tableActions = () => import(`@/components/common/baseTable/custom/${customActions}`);
            }
            if (customBtns === options.split('/')[1]) {
                c.tableBtns = () => import(`@/components/common/baseTable/custom/${customBtns}`);
            }
        })
        return c;
    }

    export default {
        mixins: [
            tables
        ],
        props: {
            dynamicData: {
                type: Object
            },
            pagePath: {
                type: String
            }
        },
        computed: {
            ...mapState('admin/baseList', [
                'listData',
                'searchFormData',
                'searchFormDataQ'
            ])
        },
        components: {
            qwInput,
            qwSelect,
            qwDatePicker,
            qwSelectTree,
            ...async(winPathName)
        },
        data () {
            return {
                util: util,
                basePath: this.dynamicData.basePath, // 拼接基础路径
                actionItems: this.dynamicData.actionItems // 操作项
            }
        },
        created () { },
        methods: {
            ...mapMutations('admin/baseList', [
                'setTableRowData'
            ]),
            // 获取表格的数据
            getData (formData) {
                let searchParam = [];
                Object.keys(this.searchFormData).forEach((key) => {
                    searchParam.push({ name: key, value: this.searchFormData[key] });
                });
                Object.keys(this.searchFormDataQ).forEach((key) => {
                    searchParam.push({ name: key, value: this.searchFormDataQ[key] });
                });

                let data = {
                    nowPage: this.nowPage,
                    pageShow: this.pageShow,
                    searchParam: JSON.stringify(searchParam),
                }
                this.loading = true;
                // 开始请求列表
                ApiRequest(this.listData.requestApi.getTableList.url, this.listData.requestApi.getTableList.type, data).then(res => {
                    let rData = res;
                    if (rData.retData !== '') {
                        rData.retData = rData.retData
                    }

                    this.tableDataList = rData.retData.results;
                    this.totalNum = rData.retData.totalNum;
                    this.loading = false;
                })
            }
        }
    }
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}
</style>
